window.onload = function () {
	search()
	banner()
	downTime()
}

// 顶部搜索的颜色渐变 => 从上往下透明度增加,到轮播图高度外透明度保持0.85不变
function search() {
	var searchBox = document.querySelector('.jd_search_box')
	var banner = document.querySelector('.jd_banner')
	var height = banner.offsetHeight
	// console.log(height)
	// 监听滚动事件
	window.onscroll = function () {
		// 1、各浏览器下 scrollTop的差异 
		// IE6/7/8:
		// 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 
		// 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop
		// Safari: 
		// safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset 
		// Firefox: 
		// 火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop 
		// 以下为兼容形式
		var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		// var scrollTop = document.documentElement.scrollTop
		// console.log(scrollTop)
		var opacity = 0
		if (scrollTop < height) {
			opacity = scrollTop / height * 0.85
		} else {
			opacity = 0.85
		}
		searchBox.style.background = 'rgb(201,21,35,' + opacity + ')'
	}
}

function banner() {
	// 1.自动轮播图且无缝 => 定时器 + C3过渡动画
	// 2.底部的点随着改变 => 根据索引切换
	// 3.滑动效果 => 利用touch事件完成
	// 4.滑动结束的时候,距离<1/3,吸附回去 => 过渡
	// 5.滑动结束的时候,距离>1/3,切换 => 过渡

	// 轮播图
	var banner = document.querySelector('.jd_banner')
	// 屏幕宽度
	var width = banner.offsetWidth
	// 图片容器
	var imageBox = banner.querySelector('ul:first-child')
	// 点容器
	var pointBox = banner.querySelector('ul:last-child')
	// 所有的点
	var points = pointBox.querySelectorAll('li')

	var addTransition = function () {
		// 加过渡
		imageBox.style.transition = 'all 0.2s'
		imageBox.style.webkitTransiton = 'all 0.2s'
	}
	var removeTransition = function () {
		// 清过渡
		imageBox.style.transition = 'none'
		imageBox.style.webkitTransiton = 'none'
	}
	var setTranslateX = function (translateX) {
		// 作位移
		imageBox.style.transform = 'translateX(' + translateX + 'px)'
		imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)'
	}

	// 设置定时轮播
	var index = 1
	var timer = setInterval(function () {
		index++
		addTransition()
		setTranslateX(-index * width)
	}, 2000)

	// 过渡完触发
	imageBox.addEventListener('transitionend', function () {
		if (index >= 9) {
			index = 1
			removeTransition()
			setTranslateX(-index * width)
		} else if (index <= 0) {
			index = 8
			removeTransition()
			setTranslateX(-index * width)
		}
		// 每一次过渡完更新点(index~1-8)
		setPoint(index)
	})

	// 设置点变换的方法
	function setPoint(index) {
		// console.log(pointBox)
		// console.log(points)
		// console.log(points.length)
		for (let i = 0; i < points.length; i++) {
			var obj = points[i]
			obj.classList.remove('now')
		}
		points[index - 1].classList.add('now')
	}

	var startX = 0
	var distanceX = 0
	var isMove = false
	imageBox.addEventListener('touchstart', e => {
		// 清除定时器
		clearInterval(timer)
		startX = e.touches[0].clientX
	})
	imageBox.addEventListener('touchmove', e => {
		var moveX = e.touches[0].clientX
		distanceX = moveX - startX
		var translateX = -index * width + distanceX
		removeTransition()
		setTranslateX(translateX)
		isMove = true
	})
	imageBox.addEventListener('touchend', e => {
		if (isMove) {
			if (Math.abs(distanceX) < width / 3) {
				addTransition()
				setTranslateX(-index * width)
			} else {
				if (distanceX > 0) {
					index--
				} else {
					index++
				}
				addTransition()
				setTranslateX(-index * width)
			}
		}
		// 到这里最好做一次重置
		startX = 0
		distanceX = 0
		isMove = false
		// 为了严谨 再清除一次
		clearInterval(timer)
		timer = setInterval(function () {
			index++
			addTransition()
			setTranslateX(-index * width)
		}, 2000)
	})

}

function downTime() {
	// 倒计时时间
	var time = 2 * 60 * 60
	// 时间盒子
	var spans = document.querySelector('.time').querySelectorAll('span')
	// 每一秒更新显示的时间
	var timer = setInterval(function () {
		time--
		var h = Math.floor(time / 3600)
		var m = Math.floor(time % 3600 / 60)
		var s = time % 60

		spans[0].innerHTML = Math.floor(h / 10)
		spans[1].innerHTML = h % 10

		spans[3].innerHTML = Math.floor(m / 10)
		spans[4].innerHTML = m % 10

		spans[6].innerHTML = Math.floor(s / 10)
		spans[7].innerHTML = s % 10

		if (time <= 0) {
			clearInterval(timer)
		}
	}, 1000)
}